<template>
  <div class="swiper-container" style="margin: 0;padding: 0;">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(v,i) in imgdata" :key="v.i">
        <img :src="src+v.name">
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  export default {
    name: 'Bannerbox',
    data() {
      return {
        src:this.$src+'tp5_jzt-blog_server/public/uploads/banner/',
        imgdata: [],
      }
    },
    components: {

    },
    methods: {
      initBanner() {
        new Swiper('.swiper-container', {
          autoplay: {
            delay: 1000,
            disableOnInteraction: false,
          },
          autoplayDisableOnInteraction: false,
          effect: 'coverflow',
          speed: 800,
          centeredSlides: true,
          slidesPerView: 2,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          onInit: function(swiper) {
            swiper.slides[2].className = "swiper-slide swiper-slide-active";
          },
          breakpoints: {
            768: {
              slidesPerView: 1,
            }
          },
          coverflowEffect: {
            rotate: 5,
            stretch: 10,
            depth: 60,
            modifier: 2,
            slideShadows: true
          },
          observeParents: false, //注意这里！！
          observer: true, //也要注意这里！！
        })
      },
      getBanner() {
        this.$axios({
          method: 'post',
          url: 'tp5_jzt-blog_server/public/index.php/home/getbanner',
        }).then((res) => {
          console.log('幻灯片数据：',res.data);
          this.imgdata = res.data;
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    created() {
      this.getBanner();
    },
    mounted() {
      this.initBanner();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import url("../style/banner.css");
</style>
